<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div class="head">
          <!-- 搜索框 -->
          <el-form ref="form" :model="form">
            <div class="form">
              <el-form-item label="学科名称" label-width="80px">
                <el-input v-model="form.subjectName"></el-input>
              </el-form-item>
              <el-form-item label-width="10px">
                <el-button size="small" @click="clear">清除</el-button>
                <el-button type="primary" size="small" @click="check">搜索</el-button>
              </el-form-item>
            </div>
          </el-form>
          <!-- 新增角色按钮 -->
          <el-row>
            <el-button
              icon="el-icon-edit"
              size="small"
              type="primary"
              style="background: #67c23a"
              @click="addSubject"
            >新增学科</el-button>
          </el-row>
        </div>
        <el-alert
          class="alert"
          type="info"
          show-icon
          :closable="false">
          <template #title>数据一共 {{ total }} 条</template>
        </el-alert>
        <el-table
          :data="list"
          style="width: 100%"
          >
          <el-table-column
            type="index"
            label="序号"
            width="48">
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="学科名称">
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建者">
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="创建日期"
            width="159">
            <template #default="{row}">{{ formatDate(row.addDate) }}</template>
          </el-table-column>
          <el-table-column
            label="前台是否显示">
            <template #default="{row}">{{ show(row.isFrontDisplay) }}</template>
          </el-table-column>
          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录">
          </el-table-column>
          <el-table-column
            prop="tags"
            label="标签">
          </el-table-column>
          <el-table-column
            prop="totals"
            label="题目数量">
          </el-table-column>
          <el-table-column
            label="操作"
            width="240">
            <template #default="{row}">
              <el-button type="text" size="small" @click="directorys({ id: row.id, name: row.subjectName })">学科分类</el-button>
              <el-button type="text" size="small" @click="tags({ id: row.id, name: row.subjectName })">学科标签</el-button>
              <el-button type="text" size="small" @click="change(row.id)">修改</el-button>
              <el-button type="text" size="small" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class='pagination'>
          <!-- 为啥下面要用sync -->
          <el-pagination
            :total="total"
            :page-size.sync="params.pageSize"  
            background
            layout="prev, pager, next, sizes, jumper"
            :current-page.sync="params.page"
            @size-change="loadData"
            @current-change="loadData"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 下面这个两个弹框不能共用一个么 -->
    <!-- 新增弹框 -->
    <el-dialog title='修改学科' :visible="subVisible" @close="closeSub">
      <!-- 表单内容 -->
      <template #default>
        <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="100px">
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="roleForm.subjectName" placeholder="请输入学科名称"/>
          </el-form-item>
          <el-form-item label="是否显示" prop="isFrontDisplay">
            <el-switch 
            v-model="roleForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-form>
      </template>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="end">
        <el-button size="middle" @click="cancel">取消</el-button>
        <el-button size="middle" type="primary" @click="confirm">确定</el-button>
      </el-row>
    </el-dialog>
    <!-- 新增弹框 -->
    <el-dialog title='新增学科' :visible="addSubVisible" @close="closeAddSub">
      <!-- 表单内容 -->
      <template #default>
        <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="100px">
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="roleForm.subjectName" placeholder="请输入学科名称"/>
          </el-form-item>
          <el-form-item label="是否显示" prop="isFrontDisplay">
            <el-switch 
            v-model="roleForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-form>
      </template>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="end">
        <el-button size="middle" @click="addCancel">取消</el-button>
        <el-button size="middle" type="primary" @click="addConfirm">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { list, detail, update, remove, add } from '@/api/hmmm/subjects'
import dayjs from "dayjs";
export default {
  data () {
    return {
      total: 0,
      map: '',
      params:{
        pageSize: 10,
        page: 1,
        subjectName: ''
      },
      list: [], // 从接口处取回
      form: {
        subjectName: '',
      },
      id: [],
      roleForm: {
        subjectName: '',
        isFrontDisplay: '',
        id: ''
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'change' },
        ]
      },
      subVisible : false,
      addSubVisible: false
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      list({page:this.params.page,  pagesize:this.params.pageSize, subjectName:this.form.subjectName}).then
      (res => {
        this.list = res.data.items
        this.total = res.data.counts
        console.log(res)
      })
    },
    show(a) {
      const map = {
        0: "否",
        1: "是",
      };
      return map[a];
    },
    clear() {
      this.form.subjectName = ''
      this.loadData()
    },
    async check() {
      this.loadData()
    },
    formatDate(value, str = "YYYY-MM-DD HH:mm:ss") {
      return dayjs(value).format(str);
    },
    async change(id) {
      this.subVisible = true
      const res = await detail({id})
      this.roleForm.subjectName = res.data.subjectName
      this.roleForm.isFrontDisplay =res.data.isFrontDisplay.toString()
      this.roleForm.id = res.data.id
    },
    async addSubject (id) {
      this.addSubVisible = true
      const res = await detail({id})
      this.roleForm.id = res.data.id
      console.log(this.roleForm.id)
    },
    closeSub() {
      this.subVisible = false
      this.$refs.roleForm.resetFields()
    },
    closeAddSub() {
      this.addSubVisible = false
      this.roleForm = {
        subjectName: '',
        isFrontDisplay: '',
      }
      this.$refs.roleForm.resetFields() // 重置表格状态
    },
    confirm() {
      this.$refs.roleForm.validate(async(valid) => {
        if (valid) {
          // 接口
          if (this.roleForm.id) {
            await update({id:this.roleForm.id,
            subjectName:this.roleForm.subjectName,
            isFrontDisplay:Number(this.roleForm.isFrontDisplay)
            })
          }
          // 更新列表
          this.loadData()
          // 提示用户
          this.$message.success('操作成功')
          this.closeSub()
        }
      })
    },
    addConfirm() {
      this.$refs.roleForm.validate(async(valid) => {
        if (valid) {
          // 接口
          if (this.roleForm) {
            await add(this.roleForm)
          }
          // 更新列表
          this.loadData()
          // 提示用户
          this.$message.success('操作成功')
          this.closeAddSub()
        }
      })
    },
    cancel() {
      this.closeSub()
    },
    addCancel() {
      this.closeAddSub()
    },
    del(id) {
      this.$confirm('此操作将永久删除该学科，是否继续?', '提示', {type: 'warning'}).then(async() => {
        await remove({id})
        // 更新列表
        this.loadData()
        // 提示用户
        this.$message.success('删除成功')
      })
    },
    directorys({id,name}) {
      // 跳转页面携带参数
      this.$router.push({
        path: "/subjects/directorys",
        query: {
          id,
          name
        }
      })
    },
    tags({id,name}) {
      // 跳转页面携带参数
      this.$router.push({
        path: "/subjects/tags",
        query: {
          id,
          name
        }
      })
    }
  },
}
</script>

<style scoped>
  .pagination {
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .head {
    height: 50px;
    display: flex;
    justify-content:space-between
  }
  .form {
    height: 32px;
    display: flex;
  }
  .alert {
    margin: 0 0 15px 0;
  }
  .el-button--primary {
    border: none;
  }
</style>
